<template>
    <a-layout class="layout">
        <!--左-->
        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }">
            <div class="logo">
                <SvgIcon class="svg" v-if="collapsed" iconClass="logo" iocnName="logo"></SvgIcon>
                <span v-else>SIEPLM</span>
            </div>
            <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
                <a-menu-item key="1" @click="$router.push('/dashboard')">
                    <DashboardFilled />
                    <span>工作台</span>
                </a-menu-item>
                <a-menu-item key="2" @click="$router.push('/design')">
                    <HighlightOutlined />
                    <span>设计</span>
                </a-menu-item>
                <a-menu-item key="3" @click="$router.push('/manufacture')">
                    <SettingOutlined />
                    <span>制造</span>
                </a-menu-item>
                <a-menu-item key="4" @click="$router.push('/cost')">
                    <PropertySafetyOutlined />
                    <span>原价</span>
                </a-menu-item>
                <a-menu-item key="5" @click="$router.push('/plan')">
                    <LaptopOutlined />
                    <span>企划</span>
                </a-menu-item>
            </a-menu>
        </a-layout-sider>
        <a-layout :style="{ marginLeft: '190px' }">
            <!--顶部-->
            <a-layout-header  class="header" >
                <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
                <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
                <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" />
              
            </a-layout-header>
            <!--内容-->
            <a-layout-content class="content"  :style="{ margin: '6px 16px', padding: '0', background: '#fff', height: '100vh' }">
                <router-view/>
            </a-layout-content>

        </a-layout>
    </a-layout>
</template>

<script setup>
import {  h,ref } from 'vue';
import {
    HighlightOutlined,
    PropertySafetyOutlined,
    SettingOutlined,
    LaptopOutlined,
    DashboardFilled,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    MailOutlined,
    UserOutlined ,
} from '@ant-design/icons-vue';



let selectedKeys = ref(['1']);
let collapsed = ref(false);




const current = ref(['user']);
const items = ref([
{
    key: 'mail',
    icon: () => h(MailOutlined),
    title: 'mail',
  },
  {
    key: 'sub1',
    icon: () => h(SettingOutlined),
    title: '下拉',
    children: [
      {
        type: 'group',
        label: 'Item 1',
        children: [
          {
            label: 'Option 1',
            key: 'setting:1',
          },
          {
            label: 'Option 2',
            key: 'setting:2',
          },
        ],
      },
      {
        type: 'group',
        label: 'Item 2',
        children: [
          {
            label: 'Option 3',
            key: 'setting:3',
          },
          {
            label: 'Option 4',
            key: 'setting:4',
          },
        ],
      },
    ],
  },
  {
    key: 'user',
    icon: () => h(UserOutlined),
    label: h(
      'a',
      {
        href: 'https://antdv.com',
        target: '_blank',
      },
      '我是头像',
    ),
    title: 'user',
  },
]);
</script>

<style scoped lang="scss">
.layout {
    width: 100%;
    height: 100%;
    overflow: auto;
    .logo {
        height: 32px;
        background: rgba(255, 255, 255, 0.3);
        margin: 16px;
        color: white;
        text-align: center;
        line-height: 32px;
        font-size: 16px;
        overflow: hidden;
    }

    .svg {
        font-size: 36px;
    }

}

.trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;

    &.hover {
        color: #1890ff;
    }
}
.header{
        background: #fff; 
        padding: 0;
        display: flex;
        justify-content: space-between;
        
    }
  
</style>